<template>
	<el-drawer v-model="currentVisible" :class="$style['drawer-handle-event']" title="警情处理" :size="550"
		:close-on-click-modal="false" :close-on-press-escape="false" @close="cancel">
		<el-tabs v-model="activeName" @tab-change="tabChange" :class="$style['event-tabs']">
			<el-tab-pane label="地图" name="map">
				<Openlayers :class="$style['map-box']" map_id="event_map" ref="refOpenlayers" v-if="currentMap.id"
					id="event_map" />
				<div :class="$style['empty-wrapper']" v-else>
					<el-empty description="无地图"></el-empty>
				</div>
			</el-tab-pane>

			<!-- <el-tab-pane label="图片" name="image">
				<el-carousel class="flex-1" :autoplay="false" v-if="eventForm.pic_url?.length">
					<el-carousel-item v-for="item in eventForm.pic_url" :key="item">
						<el-image :class="$style['event-image']" :src="item" />
					</el-carousel-item>
				</el-carousel>
				<div :class="$style['empty-image']" v-else>
					无图片
				</div>
			</el-tab-pane> -->

			<el-tab-pane label="处理记录" name="record">
				<el-table :data="currentLogs" style="width: 100%" height="100%" size="small">
					<el-table-column prop="handle_time" label="处理时间" align="center" />
					<el-table-column prop="status_name" label="处理状态" align="center" />
					<el-table-column prop="username" label="处理人" align="center" />
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="报警图片" name="images">
				<el-carousel :class="$style['image-wrapper']" :autoplay="false"
					v-if="eventForm && eventForm.images && eventForm.images.length > 0">
					<el-carousel-item v-for="item in eventForm.images" :key="item">
						<el-image :class="$style['image-item']" :src="item" />
					</el-carousel-item>
				</el-carousel>
				<div :class="$style['empty-wrapper']" v-else>
					<el-empty description="无图片"></el-empty>
				</div>
			</el-tab-pane>
			<el-tab-pane label="事件评价" name="evaluate">
				<div :class="$style['container-wrapper']" v-if="collapseList.length > 0">
					<el-card :key="index" v-for="(item, index) in collapseList" style="margin-bottom: 10px">
						<template #header>
							<span>{{ item.username }}</span>
							<span>{{ item.create_time }}</span>
						</template>
						<el-collapse v-model="activeItems">
							<el-collapse-item :key="key" v-for="(row, key) in item.children" :title="row.name"
								:name="index + '' + key">
								{{ row.value }}
							</el-collapse-item>
						</el-collapse>
					</el-card>
				</div>
				<div :class="$style['empty-wrapper']" v-else>
					<el-empty description="暂无评价记录"></el-empty>
				</div>
			</el-tab-pane>
			<el-tab-pane label="预案" name="scenario" v-if="scenarios.length > 0">
				<el-table :data="scenarios" style="width: 100%" height="100%" size="small">
					<el-table-column prop="name" label="预案名称" align="center" />
					<el-table-column label="操作" align="center">
						<template #default="{ row }">
							<el-link type="primary" :underline="false"
								@click="scenariosInfo = row; visible = true">查看预案</el-link>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<el-form :model="eventForm" label-width="auto" :class="$style['form-wrapper']">
			<el-form-item label="事件名称">
				<el-input v-model="eventForm.event_name" disabled />
			</el-form-item>
			<el-form-item label="事件分类">
				<el-input v-model="eventForm.event_type_name" disabled />
			</el-form-item>
			<el-form-item label="事件等级">
				<el-input v-model="eventForm.event_level_name" disabled />
			</el-form-item>
			<el-form-item label="处理状态">
				<el-input v-model="eventForm.status_name" disabled />
			</el-form-item>
			<el-form-item label="发生时间">
				<el-input v-model="eventForm.event_time" disabled />
			</el-form-item>
			<el-form-item label="告警源">
				<el-input v-model="eventForm.device_name" disabled />
			</el-form-item>
			<el-form-item label="事件描述">
				<el-input v-model="eventForm.event_desc" disabled />
			</el-form-item>
			<el-form-item label="处理结果">
				<el-radio-group v-model="eventForm.handle_result">
					<el-radio v-for="(item, index) in handleResult" :value="item.name" :key="index" border size="small"
						style="margin-bottom:10px;">{{ item.name }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="处理备注">
				<el-input type="textarea" v-model="eventForm.handle_remark" :rows="3" style="width:80%;"
					placeholder="处理备注" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="onSubmit">确认</el-button>
			</div>
		</template>
	</el-drawer>
	<el-dialog v-model="visible" title="查看预案" width="900" :close-on-click-modal="false" :close-on-press-escape="false"
		:class="$style['scenarios-dialog']">
		<div :class="$style['scenarios-wrapper']">
			<div :class="$style['view-container']" v-if="scenariosInfo?.type == 'WORD'">
				<VueOfficeDocx :src="scenariosInfo.url" :class="$style['view-item-wrapper']" />
			</div>
			<div :class="$style['view-container']" v-if="scenariosInfo?.type == 'PDF'">
				<iframe :src="scenariosInfo.url" :class="$style['view-item-wrapper']"></iframe>
			</div>
			<div :class="$style['image-container']" v-if="scenariosInfo?.type == 'IMAGE'">
				<el-image :src="scenariosInfo.url" />
			</div>
			<div :class="$style['view-container']" v-if="scenariosInfo?.type == 'XLSX'">
				<VueOfficeExcel :src="scenariosInfo.url" :class="$style['view-item-wrapper']" />
			</div>
		</div>
	</el-dialog>
</template>

<script>
import { ref, watch, onBeforeUnmount, nextTick } from 'vue'
import http from '@/utils/http'
import { ElMessage } from 'element-plus'
import Openlayers from "@/components/maps/openlayers.vue"
import VueTypes from 'vue-types'
import { fetchEventEvaluateLogs } from '@/api/event.rules.services'
import { fetchLinkageScenariosDocument } from '@/api/linkage.services'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'
export default {
	name: 'dialog-dahua-video',
	components: {
		Openlayers,
		VueOfficeDocx,
		VueOfficeExcel
	},
	props: {
		value: VueTypes.bool.def(false),
		title: VueTypes.string.def('关联视频'),
	},
	emits: ['update:value', 'complete'],
	setup(props, { emit }) {
		const refOpenlayers = ref(null)
		const currentVisible = ref(props.value)
		const eventForm = ref({})
		const activeName = ref('map')
		const currentMap = ref({})
		const currentLogs = ref([])
		const handleResult = ref([])
		const collapseList = ref([])
		const activeItems = ref([])
		const scenarios = ref([])

		const getInfo = () => {
			http.get('/v1/event/eventInfoById', {
				params: {
					device_id: eventForm.value.device_id,
					event_id: eventForm.value.event_id
				}
			}).then(res => {
				if (res.code == 1) {
					currentMap.value = res.data.map
					currentMap.value.zoom = currentMap.value.min_zoom
					currentLogs.value = res.data.handle_logs
					const config = {
						type: 13,
						id: 'event_map',
						eye_open: false
					}
					nextTick(() => {
						refOpenlayers.value?.init(currentMap.value, config)
					})
				}
			})
		}
		const scenariosInfo = ref({})
		const visible = ref(false)
		const initScenarios = async () => {
			const params = {
				device_id: eventForm.value.device_id,
				cid: eventForm.value.cid
			}
			const result = await fetchLinkageScenariosDocument(params)
			if (result.code == 1) {
				scenarios.value = result.data || []
			}
		}

		const initEvaluates = async () => {
			const result = await fetchEventEvaluateLogs({ event_id: eventForm.value.event_id })
			if (result.code == 1) {
				collapseList.value = result.data || []
			}
		}
		const chooseScenarios = (id) => {
			scenariosInfo.value = scenarios.value.find(item => item.id == id)
		}
		const open = (data, handleResultProps) => {
			activeName.value = 'map'
			scenarios.value = []
			eventForm.value = { ...data }
			handleResult.value = handleResultProps
			getInfo()
			currentVisible.value = true
			if (data.type == 1) {
				initScenarios()
			}
			initEvaluates()
		}

		const cancel = () => {
			currentVisible.value = false
			emit('update:value', false)
		}

		const onSubmit = () => {
			const data = {
				event_id: eventForm.value.event_id,
				handle_remark: eventForm.value.handle_remark,
				handle_result: eventForm.value.handle_result
			}
			http.post('/v1/event/handle', data).then(res => {
				if (res.code == 1) {
					currentVisible.value = false
					ElMessage.success('处理成功')
					// getList()
					eventForm.value = {}
				}
			})
		}

		watch(
			() => props.value,
			visible => {
				currentVisible.value = visible
			}
		)


		onBeforeUnmount(() => {
			currentVisible.value = false
		})
		const tabChange = async (val) => {

		}
		return {
			refOpenlayers,
			currentVisible,
			currentMap,
			currentLogs,
			eventForm,
			activeName,
			cancel,
			open,
			onSubmit,
			handleResult,
			collapseList,
			tabChange,
			activeItems,
			scenarios,
			scenariosInfo,
			chooseScenarios,
			visible
		}
	}
}
</script>

<style lang="scss" module>
.drawer-handle-event {
	& [class~="el-drawer__header"] {
		margin-bottom: 0;
	}

	& [class~="el-drawer__body"] {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 0 20px;
	}
}

.event-tabs {
	padding-bottom: 20px;
	margin-bottom: 10px;
	border-bottom: 1px solid #e4e7ed;

	& [class~="el-tabs__header"] {
		margin-bottom: 5px;
	}

	& [class~="el-tabs__item"] {
		padding: 0 20px !important;
	}

	&>[class~="el-tabs__content"],
	& [class~="el-tab-pane"] {
		height: 240px;
	}

	& [class~="el-table__inner-wrapper"]:before {
		display: none;
	}
}

.event-image {
	display: block;
	max-width: 100;
	height: 100%;
	margin: 0 auto;
}

.map-box {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
}

.empty-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 32px;
	font-weight: 600;
	color: #6b778c;
}

.form-wrapper {
	flex: 1;
	overflow-y: auto;

	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 10px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 3px;
	}

	& [class~="el-form-item"] {
		margin-bottom: 10px;
	}

	& [class~="el-input"] {
		width: 80%;
	}
}

.empty-wrapper {
	width: 100%;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-wrapper {
	width: 100%;
	height: 260px;
}

.image-item {
	margin: 0 auto;
	display: block;
	height: 100%;
	max-width: 100%;
}

.container-wrapper {
	flex: 1;
	height: 100%;
	overflow-y: auto;
	padding: 5px;
	@include scrollbar();

	& [class~='el-card__header'] {
		display: flex;
		height: 35px;
		padding: 0 10px;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;

		>span:nth-child(1) {
			font-size: 14px;
			font-weight: 600;
			color: #303133;
		}

		>span:nth-child(2) {
			font-size: 12px;
			font-weight: 400;
			color: #909399;
		}
	}

	& [class~='el-card__body'] {
		padding: 10px;

		& [class~='el-collapse-item'] {
			& [class~='el-collapse-item__header'] {
				height: 35px;
				font-size: 14px;
				font-weight: 500;
				color: #303133;
			}

			& [class~='el-collapse-item__content'] {
				padding-bottom: 10px;
				font-size: 12px;
				font-weight: 400;
				color: #909399;
			}
		}
	}
}

.scenarios-dialog {
	height: 700px;
	display: flex;
	flex-direction: column;

	& [class~='el-dialog__body'] {
		flex: 1;
		display: flex;
		overflow-y: auto;
	}
}

.scenarios-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* 确保宽度占满 */
	overflow: hidden;
	/* 防止内容溢出 */
}

.view-container {
	flex: 1;
	display: flex;
	overflow: auto;
	/* 修改为auto允许滚动 */
	width: 100%;
	/* 确保宽度占满 */
	height: 100%;
	/* 确保高度占满 */
}

.view-item-wrapper {
	flex: 1;
	background: #ccc;
	overflow: auto;
	/* 修改为auto允许滚动 */
	width: 100%;
	/* 确保宽度占满 */
	min-height: 100%;
	/* 确保至少占满容器高度 */
}

.image-container {
	flex: 1;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	& [class~='el-image'] {
		/* 最大宽度不超过容器宽度 */
		height: 100%;
		/* 最大高度不超过容器高度*/
		object-fit: contain;
		/* 保持图片的比例并适应容器 */
		max-width: 100%;
		/* 限制图片的最大宽度 */
		max-height: 100%;
		/* 限制图片的最大高度 */
		box-sizing: border-box;
		/* 确保边距不影响宽高 */
	}
}
</style>